<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <title>team</title>
</head>
<body>
    <div class="wrapper">
    <div class="header">
    </div>
    <div class="mainPage">
        <div></div>
        <div class="aboutPage1">
                <h2>创业企业的成长伙伴</h2>
                <p>北极光团队因袭自身丰富的创业、投资和管理经验，常年深耕积累起的广泛的人脉和深厚的行业资源，无论对于创业企业、投资人都是可信赖的合作伙伴。</p>
        </div>
        <div class="teamPage1">
            <ul>
                <li>
                    <a href="javascript:;">
                        ·
                        <span data-originText="所有团队">所有团队</span>
                    </a>
                    <dl>
                        <dd>投资团队</dd>
                        <dd>运营团队</dd>
                    </dl>
                </li>
                <li>
                    <a href="javascript:;">
                        ·
                        <span data-originText="所有领域">所有领域</span>
                    </a>
                    <dl>
                        <dd>TMT</dd>
                        <dd>先进技术</dd>
                        <dd>医疗健康</dd>
                    </dl>
                </li>
                <li>
                    <a href="javascript:;">
                        ·
                        <span data-originText="所有区域">所有区域</span>
                    </a>
                    <dl>
                        <dd>北京</dd>
                        <dd>上海</dd>
                        <dd>深圳</dd>
                        <dd>Menlo Park</dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="teamPage2">
            <div class="container clearfix">
                <div class="view">
                    <div class="viewContent">
                        <a class="teamPerson" href="#">
                            <div class="img">
                                <img src="img/SENSORO.jpg" alt="">
                            </div>
                            <div class="personInfo">
                                <span class="name">宿</span>
                                <span class="offer">创始人</span>
                            </div>
                            <div class="shadow"></div>
                        </a>
                        <a class="teamPerson" href="#">
                            <div class="img">
                                <img src="img/SENSORO.jpg" alt="">
                            </div>
                            <div class="personInfo">
                                <span class="name">宿</span>
                                <span class="offer">创始人</span>
                            </div>
                            <div class="shadow"></div>
                        </a>
                        <a class="teamPerson" href="#">
                            <div class="img">
                                <img src="img/SENSORO.jpg" alt="">
                            </div>
                            <div class="personInfo">
                                <span class="name">宿</span>
                                <span class="offer">创始人</span>
                            </div>
                            <div class="shadow"></div>
                        </a>
                        <a class="teamPerson" href="#">
                            <div class="img">
                                <img src="img/SENSORO.jpg" alt="">
                            </div>
                            <div class="personInfo">
                                <span class="name">宿</span>
                                <span class="offer">创始人</span>
                            </div>
                            <div class="shadow"></div>
                        </a>
                        <a class="teamPerson" href="#">
                            <div class="img">
                                <img src="img/SENSORO.jpg" alt="">
                            </div>
                            <div class="personInfo">
                                <span class="name">宿</span>
                                <span class="offer">创始人</span>
                            </div>
                            <div class="shadow"></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="push"></div>
</div>
    <div class="footer"> 
    </div>
</body>
<script src="util/jquery1.9.1.min.js"></script>
<script src="js/main.js"></script>
<script>
    $(function(){
        // 提取头部
        aClick(1);
        
        $dls = $('.teamPage1 li dl');
        $lis = $('.teamPage1 li');
        $($dls).css('display','none');
        $lis.bind('mouseenter',function(){
            $(this).children('dl').css('display','block');
            $(this).siblings().children('dl').css('display','none');
            var $dds = $(this).find('dd');
            $dds.on('click',function(){
                $(this).addClass('selected').siblings().removeClass('selected');
                $(this).parent().siblings().children()[0].innerHTML = $(this)[0].innerHTML;
                $($dls).css('display','none');
                // 其他的li的相关操作，也可parents('li')
                $(this).parent().parent().addClass('active').siblings().each(
                    function(){
                        var originText = $(this).find('span').attr('data-originText');
                        $(this).find('span').html(originText);
                        $(this).removeClass('active');
                        $(this).find('dd').removeClass('selected');
                    }
                )
            })
        })
        $lis.bind('mouseleave',function(){
            $($dls).css('display','none');
        })
        
    })
</script>
</html>